<template>
  <view class="wrap">
    <u-form :model="model" :rules="rules" ref="uForm" :errorType="errorType" label-position="left">
      <u-form-item label-width="130" label="姓名" prop="name">
        <u-input :border="false" placeholder="请输入姓名" v-model="model.name" type="text"></u-input>
      </u-form-item>
      <u-form-item label="性别" prop="sex" label-width="130">
        <u-input :border="false" type="select" :select-open="selectShow" v-model="model.sex" placeholder="请选择性别" @click="selectShow = true"></u-input>
        <u-action-sheet :list="selectList" v-model="selectShow" @click="selectCallback"></u-action-sheet>
      </u-form-item>
      <u-form-item label-width="130" label="学院" prop="college">
        <u-input :border="false" placeholder="请输入学院" v-model="model.college" type="text"></u-input>
      </u-form-item>
      <u-form-item label-width="130" label="专业" prop="specialize">
        <u-input :border="false" placeholder="请输入专业" v-model="model.specialize" type="text"></u-input>
      </u-form-item>
      <u-form-item label-width="130" label="学号" prop="study_store">
        <u-input :border="false" placeholder="请输入学号" v-model="model.study_store" type="text"></u-input>
      </u-form-item>
      <u-form-item label-width="130" label="政治面貌" prop="polity_mask">
        <u-input :border="false" placeholder="请输入政治面貌" v-model="model.polity_mask" type="text"></u-input>
      </u-form-item>
      <!-- 			<u-form-item label="学院/专业" prop="region" label-width="150">
				<u-input :border="false" type="select" :select-open="pickerShow" v-model="model.region" placeholder="请选择地区" @click="pickerShow = true"></u-input>
			</u-form-item> -->
      <u-form-item :rightIconStyle="{color: '#888', fontSize: '32rpx'}" right-icon="kefu-ermai" label="手机号码"
        prop="phone" label-width="130">
        <u-input :border="false" placeholder="请输入手机号" v-model="model.phone" type="number"></u-input>
      </u-form-item>
      <u-form-item label-width="130" label="QQ号码" prop="qq">
        <u-input :border="false" placeholder="请输入QQ号" v-model="model.qq" type="text"></u-input>
      </u-form-item>
      <u-form-item label="上传图片" prop="photo" label-width="130">
        <u-upload max-count="1" :auto-upload="false" width="160" height="160" ref="photo"></u-upload>
      </u-form-item>
      <u-form-item label-width="130" label="社团1" prop="societies_name_1" class="soc">
        <u-input :border="false" placeholder="请输入社团名" v-model="model.societies_name_1" type="text" @blur="changeSo(1)">
        </u-input>
      </u-form-item>
      <u-form-item label-width="130" label="社团2" prop="societies_name_2" class="soc">
        <u-input :border="false" placeholder="请输入社团名" v-model="model.societies_name_2" type="text" @blur="changeSo(2)">
        </u-input>
      </u-form-item>
    </u-form>
    <!-- 		<view class="agreement">
			<u-checkbox v-model="check" @change="checkboxChange"></u-checkbox>
			<view class="agreement-text">
				勾选代表同意uView的版权协议
			</view>
		</view> -->
    <!-- 		<u-button @click="" class="btn" type="warning">保存草稿</u-button> -->
    <u-button @click="submit" class="btn" type="warning">提交导出</u-button>
  </view>
</template>

<script>
  export default {
    data() {
      let that = this;
      return {
        model: {
          name: '',
          sex: '', //性别
          college: '', //学院
          specialize: '', //专业
          study_store: '', //学号			
          polity_mask: '', //政治面貌
          qq: '', //qq
          phone: '', //电话
          societies_num_1: '',
          societies_name_1: '',
          societies_num_2: '',
          societies_name_2: '',
        },
        rules: {
          name: [{
              required: true,
              message: '请输入姓名',
              trigger: 'blur',
            },
            {
              min: 3,
              max: 5,
              message: '姓名长度在3到5个字符',
              trigger: ['change', 'blur'],
            },
            {
              validator: (rule, value, callback) => {
                return this.$u.test.chinese(value);
              },
              message: '姓名须为中文',
              trigger: ['change', 'blur'],
            },
          ],
          college: [{
            required: true,
            message: '请输入学院',
            trigger: 'blur',
          }],
          specialize: [{
            required: true,
            message: '请输入专业',
            trigger: 'blur',
          }],
          sex: [{
            required: true,
            message: '请选择性别',
            trigger: 'change'
          }, ],

          intro: [{
              required: true,
              message: '请填写简介'
            },
            {
              min: 5,
              message: '简介不能少于5个字',
              trigger: 'change',
            },
            // 正则校验示例，此处用正则校验是否中文，此处仅为示例，因为uView有this.$u.test.chinese可以判断是否中文
            {
              pattern: /^[\u4e00-\u9fa5]+$/gi,
              message: '简介只能为中文',
              trigger: 'change',
            },
          ],
          polity_mask: [{
            required: true,
            message: '请输入政治面貌',
            trigger: 'blur'
          }],
          study_store: [{
            required: true,
            message: '请输入学号',
            trigger: 'blur'
          }],
          qq: [{
            required: true,
            message: '请输入QQ号',
            trigger: 'blur'
          }],
          phone: [{
              required: true,
              message: '请输入手机号',
              trigger: ['change', 'blur'],
            },
            {
              validator: (rule, value, callback) => {
                // 调用uView自带的js验证规则，详见：https://www.uviewui.com/js/test.html
                return this.$u.test.mobile(value);
              },
              message: '手机号码不正确',
              // 触发器可以同时用blur和change，二者之间用英文逗号隔开
              trigger: ['change', 'blur'],
            }
          ],
        },
        check: false,
        selectList: [{
            text: '男'
          },
          {
            text: '女'
          },
        ],
        selectShow: false,
        errorType: ['message'],
      };
    },
    onLoad(option) {
      uni.setNavigationBarTitle({
        title: option.title
      })
      this.model.societies_name_1 = option.title
      this.$request({
        method: 'GET', // 默认GET
        url: '/getnum',
        data: {
          name: option.title
        },
        header: {}, // 可不填，虽然多半不可能
      }).then(res => {
        if (res.code == 200) {
          console.log(res)
          this.model.societies_num_1 = res.data
          console.log(this.model.societies_num_1)
        }
      }).catch(res => {
        // 失败后执行
      })
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    computed: {
      getToken() {
        return uni.getStorageSync('token')
      }
    },
    methods: {
      submit() {
        let that = this
        console.log(this.model)
        let model = this.model
        let photos = [];
        photos = this.$refs.photo.lists;
        this.$refs.uForm.validate(valid => {
          if (valid) {
            that.$upfile({
              url: '/joinSt',
              name: 'photo',
              filePath: photos[0].file.path,
              data: model,
              header: {
                'Authorization': "Bearer " + that.getToken
              }, // 可不填，虽然多半不可能
            }).then(res => {
              // 成功后执行，具体格式待对完接口完善
              // console.log(res)
              console.log(`${wx.env.USER_DATA_PATH}`)
              const fs = wx.getFileSystemManager()
              fs.writeFileSync(`${wx.env.USER_DATA_PATH}/enroll.doc`, res, 'utf8')
              uni.showToast({
                title: '提交成功',
                success() {
                  uni.navigateTo({
                    url: '/pages/index/index'
                  })
                }
              })
              wx.openDocument({
                filePath: `${wx.env.USER_DATA_PATH}/enroll.doc`,
                fileType: 'doc',
                showMenu: true
              })
              // return download($response['body'], 'enroll.doc', true);
            }).catch(res => {
              // 失败后执行
              console.log(res)
            })
            console.log('验证通过');
          } else {
            console.log('验证失败');
          }
        });
      },
      // 点击actionSheet回调
      selectCallback(index) {
        uni.hideKeyboard();
        this.model.sex = this.selectList[index].text;
      },
      changeSo(id) {
        if (id != 2) {
          let name = this.model.societies_name_1
          this.$request({
            method: 'GET', // 默认GET
            url: '/getnum',
            data: {
              name: name
            },
            header: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
          }).then(res => {
            console.log(res)
            console.log(res.data)
            this.model.societies_num_1 = res.data
            console.log(this.model.societies_num_1)
          }).catch(res => {
            // 失败后执行
          })
        } else {
          let name = this.model.societies_name_2
          this.$request({
            method: 'GET', // 默认GET
            url: '/getnum',
            data: {
              name: name
            },
            header: {
              'Content-Type': 'application/x-www-form-urlencoded'
            },
          }).then(res => {
            console.log(res)
            console.log(res.data)
            this.model.societies_num_2 = res.data
            console.log(this.model.societies_num_1)
          }).catch(res => {
            // 失败后执行
          })
        }
      },
    }
  };
</script>

<style scoped lang="scss">
  .wrap {
    padding: 30rpx;
  }

  .agreement {
    display: flex;
    align-items: center;
    margin: 40rpx 0;

  }

  .agreement-text {
    padding-left: 8rpx;
    color: $u-tips-color;
  }

  .soc {}

  .btn,
  button {
    margin: 20rpx;
  }
</style>
